<template>
	<view class="container">
		<fu-navbar title="巡检结果" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="bg-f">
			<view class="flex align-center justify-between border-b-c9 padding-24">
				<view class="fs-26">巡检值</view>
				<input placeholder="请输入" class="ipt" placeholder-class="pla-ipt" v-model="value" />
			</view>
			<view class="flex align-center justify-between padding-24">
				<view class="fs-26">巡检状态</view>
				<view class="flex align-center" @click="toggleTab('selector')">
					<text class="fs-26 padding-lr-12 color-gray" v-if="state!=2&&state!=3&&state!=4">请选择</text>
					<image src="../../../static/images/dui.png" class="work-status" v-if="state == 2"></image>
					<image src="../../../static/images/error.png" class="work-status" v-else-if="state == 3"></image>
					<image src="../../../static/images/icon43.png" class="work-status" v-else-if="state == 4"></image>
					<image src="../../../static/images/arrow-r.png" style="width: 32rpx;height: 32rpx;" v-else></image>
				</view>
			</view>
		</view>
		
		<view class="bottom-wrap">
			<view class="bottom flex align-center justify-between fs-36">
				<view class="btn" @click="submit">保存</view>
			</view>
		</view>
		
		<w-picker mode="selector" :options="workState" themeColor="#30a3e0" :defaultProps="workProps" default-type="src" @confirm="onConfirm($event, 'selector')" ref="selector" :is-text="false" :is-img="true"></w-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workState: [
					{ src: '/static/images/dui.png', id: 2 },
					{ src: '/static/images/error.png', id: 3 },
					{ src: '/static/images/icon43.png', id: 4 }
				],
				workProps: {
					label: 'src',
					value: 'id'
				},
				state: 0,
				value: '',
				id: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.state = option.state
			this.value = option.recordedValue == 'null' ? '' : option.recordedValue
		},
		methods: {
			toggleTab(ref) {
				this.$refs[ref].show();
			},
			onConfirm(e, type) {
				console.log(e)
				this.state = e.value
			},
			updatePatrolTask(e, item, i, childx) {
				let that = this
				this.$api.post(global.apiUrls.updatePatrolTask, {
					id: this.id,
					state: this.state,
					recordedValue: this.value
				}).then(res => {
					if (res.data.code != 9100) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			updateState() {
				this.$api.post(global.apiUrls.updatePatrolTask, {
					id: this.id,
					state: this.state
				}).then(res => {
					if (res.data.code != 9100) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			async submit() {
				if (!this.value) {
					uni.showToast({
						title: '请输入巡检值',
						icon: 'none'
					})
					return
				}
				if (this.state != 2 && this.state != 3 && this.state != 4) {
					uni.showToast({
						title: '请选择巡检状态',
						icon: 'none'
					})
					return
				}
				await this.updatePatrolTask();
				await this.updateState();
				uni.$emit('updateWorks', this.value, this.state)
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f3f5f8;
	}
	.pla-ipt {
		font-size: 26rpx;
	}
	.ipt {
		font-size: 26rpx;
		text-align: right;
	}
	.work-status {
		width: 44rpx;
		height: 44rpx;
	}
	.bottom-wrap {
		height: 140rpx;
		.bottom {
			padding: 16rpx 48rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			z-index: 9;
			.btn {
				width: 100%;
				height: 98rpx;
				border-radius: 12rpx;
				text-align: center;
				line-height: 98rpx;
				color: #fff;
				background-color: #0f68f0;
			}
		}
	}
</style>